﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>图表示列</title>
     <script type="text/javascript" src="../../wz_jsgraphics.min.js"></script>
    <script type="text/javascript" src="../chart_data.min.js"></script>
    <script type="text/javascript" src="../../hy.Chart.js"></script>
</head>
<body>
    <br />
    <div>
        <div id="GraphicsPanel" style="position: relative; cursor: pointer; left: 100px;">
        </div>
    </div>
    <div id="info" style="font-size: 12px; font-family: 宋体, Arial, Helvetica, sans-serif;
        font-size: 12px; line-height: 25px; position: absolute; top: 50px; left: 950px;">
    </div>
    <div id="info2" style="font-size: 12px; font-family: 宋体, Arial, Helvetica, sans-serif;
        font-size: 12px; line-height: 25px; position: absolute; top: 200px; left: 950px;">
    </div>
    <br />
    <br />
    <br />
    <div id="GraphicsPanel2" style="position: relative; cursor: pointer; left: 100px;
        border-right-style: solid; border-right-width: 1px; width: 800px; height: 300px;">
    </div>
    <br />
    <br />
    <br />
    <div id="GraphicsPanel3" style="position: relative; cursor: pointer; left: 100px;
        border-right-style: solid; border-right-width: 1px; width: 800px; height: 500px;">
    </div>
    <div id="message">
    </div>
    <br />
    <br />
    <div id="info3" style="font-size: 12px; font-family: 宋体, Arial, Helvetica, sans-serif;
        font-size: 12px; line-height: 25px; position: absolute; top: 340px; left: 650px;">
    </div>
    <div id="code">
    </div>
    <div id="lineZoombtn" onclick="lineZoombtn();">+++</div>&nbsp;<div id="Div1" onclick="lineZoom1btn();">--</div>

    <script type="text/javascript">

        var p = new _hy.Palette("GraphicsPanel", document.getElementById("GraphicsPanel"), 800, 100, 100, 1000, "mouseMove", "myonmouseout");
        p.rowno = 5;
        p.paint();
        var line = new _hy.Chart.Line(p);
        line.attr = "onclick='line_OnClick(#=CurrentIndex#);'";
        line.setDataSource(DataArr);
        line.InfoPanel = document.getElementById("info");
        line.lineStyle = "filter: Alpha(opacity=40); -moz-opacity: 0.4;opacity: 0.4; ";
        line.IsShowValue = false;
        line.IsShowXstr = false;
        line.paint();
        line.showInfo();
        function line_OnClick(index) {
            alert(index);
        }

        var p2 = new _hy.Palette("GraphicsPanel2", document.getElementById("GraphicsPanel2"), 800, 100, 800, 100, "mouseMove2", "myonmouseout2");
        p2.rowno = 5;
        p2.paint();
        var bar = new _hy.Chart.Bar(p2);
        bar.IsShowValue = false;
        bar.IsShowXstr = false;
        bar.setDataSource(DataArr);
        bar.InfoPanel = document.getElementById("info2");
        bar.barStyle = "border-width: 1px; border-color: #FFFF00; font-size: 12px; border-top-style: solid; border-right-style: solid; border-left-style: solid;filter: Alpha(opacity=60); -moz-opacity: 0.6;opacity: 0.6;";
        bar.attr = "onmousemove='line_OnMouseMove(#=CurrentIndex#);' onclick='line_OnClick(#=CurrentIndex#);'";
        bar.paint();
        bar.showInfo();
        function mouseMove2(ev) {
            p2.OnMouseMove(ev);
        }
        function myonmouseout2() {
            p2.OnMouseOut();
        }
        var xp = p.xProportion;
        var bxp = p.xProportion;
        function lineZoombtn() {
            xp = parseInt(xp) + 1;
            bxp = parseInt(bxp) + 1;
            line.paint(xp);
            bar.paint(bxp);
        }
        function lineZoom1btn(){
            xp = parseInt(xp) - 1;
            bxp = parseInt(bxp) - 1;
            line.paint(xp);
            bar.paint(bxp);
        }
    </script>
            <script type="text/javascript">
                var p3 = new _hy.Palette("GraphicsPanel3", document.getElementById("GraphicsPanel3"), 500, 320, 500, 1000, "mouseMove3", "myonmouseout3");
                p3.rowno = 5;
                p3.paint();
                function mouseMove3(ev) {
                    p3.OnMouseMove(ev);
                }
                function myonmouseout3() {
                    p3.OnMouseOut();
                }
                var pie = new _hy.Chart.Pie(p3);
                pie.setDataSource(DataArr);
                pie.InfoPanel = document.getElementById("info3");
                pie.pieStyle = "filter: Alpha(opacity=60); -moz-opacity: 0.6;opacity: 0.6;";
                pie.IsShowValue = false;
                pie.paint();
                pie.showInfo();
                //document.getElementById("code").innerText = document.getElementById("GraphicsPanel2").innerHTML;
    </script>


</body>
</html>
